EntityBillboard
<template>
    <div class="EntityMove">
        <cesium-viewer @viewerAlready="viewerAlready"/>
    </div>
</template>
<script>
    import CesiumViewer from "../../CesiumViewer";

    const location4 = require("../../../assets/images/location4.png");
    export default {
        name: "EntityMove",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        methods: {
            //初始化Cesium
            viewerAlready() {
                window.viewer.scene.globe.depthTestAgainstTerrain = true; //设置该属性为 true\false，开启\关闭 地形遮盖(高程遮挡）
                window.viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(
                        87.5531,
                        28.1517,
                        150000
                    ),
                    orientation: {
                        // 指向
                        heading: 0.0,
                        // 视角
                        pitch: -20.0,
                        roll: 0.0
                    }
                });
                this.entitiesAdd();
                this.entityAction()
            },
            entitiesAdd(){
                let entities = window.viewer.entities;
                entities.add({
                    position: Cesium.Cartesian3.fromDegrees(87.5531,
                        28.5917),
                    billboard: {
                        image: location4, // default: undefined
                        width: 30, // default: undefined
                        height: 40, // default: undefined
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM // default: CENTER
                    }
                });
                entities.add({
                    position: Cesium.Cartesian3.fromDegrees(87.0000,
                        28.5917),
                    ellipse: {
                        semiMinorAxis: 7000.0,
                        semiMajorAxis: 10000.0,
                        outline: true,
                        outlineColor: Cesium.Color.WHITE,
                        outlineWidth: 4,
                        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM // default: CENTER
                    },
                });
            },
            entityAction() {
                const _this = this;
                const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);
                const scene = window.viewer.scene;
                // const camera=window.viewer.camera;
                let pickedObject = null;
                let dragging = false;
                handler.setInputAction(
                    function (movement) {
                        pickedObject = scene.pick(movement.position);
                        // console.log(pickedObject);
                        // if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
                        if (Cesium.defined(pickedObject)) {
                            // pickedObject.id.billboard.scale = 1.2;
                            dragging = true;
                            scene.screenSpaceCameraController.enableRotate = false;
                        }
                    },
                    Cesium.ScreenSpaceEventType.LEFT_DOWN
                );

                handler.setInputAction(
                    function (movement) {
                        if (dragging) {
                            pickedObject.id.position = _this.initPosition(movement.endPosition);
                        }
                    },
                    Cesium.ScreenSpaceEventType.MOUSE_MOVE
                );

                handler.setInputAction(
                    function () {
                        // pickedObject.id.billboard.scale = 1;
                        dragging = false;
                        scene.screenSpaceCameraController.enableRotate = true;
                    },
                    Cesium.ScreenSpaceEventType.LEFT_UP
                );
            },
            //屏幕定位转笛卡尔定位
            initPosition(Cartesian2) {
                let ray = window.viewer.camera.getPickRay(Cartesian2);
                let earthPosition = window.viewer.scene.globe.pick(
                    ray,
                    window.viewer.scene
                );
                let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
                let pos = Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(cartographic.longitude),
                    Cesium.Math.toDegrees(cartographic.latitude),
                    cartographic.height
                );
                return pos;
            }
        }
    };
</script>
